/* ================
		半径
================ */
.com-rounded-none {
  border-radius: 0px;
}

.com-rounded-sm {
  border-radius: $com-border-radius-sm !important;
}

.com-rounded {
  border-radius: $com-border-radius-base !important;
}

.com-rounded-md {
  border-radius: $com-border-radius-md !important;
}

.com-rounded-full {
  border-radius: 9999px !important;
}

@for $i from 0 through 100 {
  .com-rounded-#{$i} {
    border-radius: $i + px;
  }
}

/* ================
		边框
================ */
.com-border,
.com-border-bottom,
.com-border-left,
.com-border-right,
.com-border-top,
.com-border-top-bottom {
  position: relative;
}

.com-border-bottom:after,
.com-border-left:after,
.com-border-right:after,
.com-border-top-bottom:after,
.com-border-top:after,
.com-border:after {
  /* #ifndef APP-NVUE */
  content: ' ';
  /* #endif */
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  box-sizing: border-box;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  // 多加0.1%，能解决有时候边框缺失的问题
  width: 199.8%;
  height: 199.7%;
  transform: scale(0.5, 0.5);
  border: 0 solid $com-color-border;
  z-index: 2;
}

.com-border-top:after {
  border-top-width: 1px;
}

.com-border-left:after {
  border-left-width: 1px;
}

.com-border-right:after {
  border-right-width: 1px;
}

.com-border-bottom:after {
  border-bottom-width: 1px;
}

.com-border-top-bottom:after {
  border-width: 1px 0;
}

.com-border:after {
  border-width: 1px;
}

/* ================
		阴影
================ */
.com-shadow {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.com-shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.com-shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.com-shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.com-shadow-xl {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* ================
		透明度
================ */
@for $i from 0 through 20 {
  .com-opacity-#{$i * 5} {
    opacity: 0.05 * $i;
  }
}
